<template>
  <div ref="chart1" id="chart1"></div>
</template>

<script>
export default {
  name: "EchartsLine",
  data(){
    return {
      work_areas: [],
      companys: [],
      salarys: [],
      _max: [],
      _min: []
    }
  },
  computed: {},
  mounted() {
    this.design_line()
  },
  methods: {
    design_line(){
            this.axios.get('/api/design/line').then((res)=>{
            // 判断返回信息状态
            if(res.data.code==200){
                this.work_areas = res.data.work_areas
                this.companys = res.data.companys
                this.salarys = res.data.salarys
                this._max = res.data._max
                this._min = res.data._min
                this.line()
            }
        }) 
        },
    line() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(this.$refs["chart1"]);

      // 指定图表的配置项和数据
      // const option = {
      //   xAxis: {
      //     type: "category",
      //     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      //   },
      //   tooltip: {},
      //   yAxis: {
      //     type: "value"
      //   },
      //   series: [
      //     {
      //       data: [820, 932, 901, 934, 1290, 1330, 1320],
      //       type: "line",
      //       smooth: true
      //     }
      //   ]
      // };
      var option = {
        title: {
          text: "Line",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ['category', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.work_areas,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "企业数量",
            type: "line",
            stack: "Total",
            data: this.companys,
          },
          {
            name: "平均薪资",
            type: "line",
            stack: "Total",
            data: this.salarys,
          },
          {
            name: "最高平均薪资",
            type: "line",
            stack: "Total",
            data: this._max,
          },
          {
            name: "最低平均薪资",
            type: "line",
            stack: "Total",
            data: this._min,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    options() {},
  },
};
</script>

<style scoped>
#chart1 {
  width: 50%;
  height: 400px;
}
</style>
